<template>
    <div class="sort">
        <div class="search" @click="e_gosearch">
          <div class="s-search">
            <search-btn></search-btn>
          </div>
        </div>
        <div class="sort-content">
            <div class="sort-list" ref="sortList">
                <ul>
                    <li v-for="(list, index) in leftData" :key="index" class="list-item" :class="{'active': index === listIndex}" @click="listClick(index, list.id)">
                        <span>{{list.label}}</span>
                    </li>
                </ul>
            </div>
            <div class="sort-shop">
                <sort-goods :goods="rightData" :headImg="img" :title="title" :listIndex="listIndex" @OutGood="_goList"></sort-goods>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import sortGoods from '@c/sortGoods/sortGoods'
import searchBtn from '@c/searchBtn/searchBtn'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
export default {
	name: 'sort',
	data() {
		return {
			shops: [],
			leftData: [], //左部列表数据
			rightData: [], //右部列表数据
			title: [], //当前选择名
			img: [], //当前选择图片
			lsitScroll: {}, //滚动对象
			listIndex: 0,
		}
	},

	components: {
		'sort-goods': sortGoods,
		'search-btn': searchBtn,
	},

	computed: {},

	methods: {
		// 点击列表商品从新加载商品列表
		listClick(index, id) {
			this.listIndex = index
			this._getRigtList(id)
		},
		//查询
		e_gosearch() {
			this.$router.push('/search')
		},
		// 实现分类列表滚动
		_initScroll() {
			if (this.lsitScroll) {
				this.lsitScroll = new BScroll(this.$refs.sortList, {
					click: true,
				})
			} else {
				this.lsitScroll.refresh()
			}
		},
		// 获得左部列表数据
		_getLeftList(id) {
			// this.$store.state.loadding = true
			gpost(vlink.classify + id + '/1').then(re => {
				// this.$store.state.loadding = false
				if (re.status === 0) {
					this.leftData = re.data
					re.data.forEach(item => {
						this.img.push(item.icon)
						this.title.push(item.label)
					})
					this._getRigtList(re.data[0].id)
				} else {
					this.$Message.success(re.msg)
				}
			})
		},
		// 获得右部列表数据
		_getRigtList(id) {
			// this.$store.state.loadding = true
			gpost(vlink.classify + id + '/1').then(re => {
				// this.$store.state.loadding = false
				if (re.status === 0) {
					this.rightData = re.data
				} else {
					this.$Message.success(re.msg)
				}
			})
		},
    /**
     * 跳转列表页
     * @param good [Object] 子元素传过来的值
     * @private
     */
    _goList(good) {
      console.log(good)
		  this.$router.push({
        path: '/classifyList',
        query: {
          name: good.label,
          id: good.id,
          type: 1,
        }
      })
    }
	},

	mounted() {
		this._initScroll()
	},

	created() {
		// 实现分类列表滚动
		this.$nextTick(() => {
			this._initScroll()
		})
		this._getLeftList(0)
	},
}
</script>
